<template>
  <transition>
  <div class="app-number-cancle">
    <section class="app-main">
      <div class="module-search clearfix">
        <input class="search-input" type="number" placeholder="请输入卡券号" v-model="cardNumber">
        <button class="search-button" type="button" @click="handleCardSearch">搜索</button>
      </div>
      <dl class="module-step" v-if="!showCard">
        <dd class="item">
          <span class="item-title">第一步、搜索卡券</span>
          <span class="item-tips">请顾客出示卡券，输入卡券号</span>
        </dd>
        <dd class="item">
          <span class="item-title">第二步、验证卡券信息</span>
          <span class="item-tips">验证卡券是否有效</span>
        </dd>
        <dd class="item">
          <span class="item-title">第三步、使用完成</span>
          <span class="item-tips">查看使用结果，顾客将同时收到卡券核销或会员卡<br>使用通知</span>
        </dd>
      </dl>
      <!--搜索到卡券出来的内容-->
      <div class="search-result" v-if="showCard">
        <div class="module-card">
              <div class="item-header" v-text="cardInfo.name"></div>
              <dl class="item-body">
                <dd><span class="addon">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span><span v-text="cardInfo.code"></span></dd>
                <dd><span class="addon">有效期限：</span>{{cardInfo.beginTime}}～{{cardInfo.endTime}}</dd>
              </dl>
        </div>
        <div class="button-content">
          <button class="btn btn-danger" type="button" @click="handleCancle">确认核销</button>
        </div>
      </div>
      <!--搜索到卡券出来的内容-->
    </section>
  </div>
    </transition>
</template>
<script>
  import { Header,Cell,Toast } from 'mint-ui';

  //  Vue.component(Header.name, Header);
  export default {
    components:{
      Header,
      Cell,
    },
    data () {
      return {
          showCard:false,
          cardNumber:'',
          cardInfo:{
             name:'',
             code:'',
             beginTime:'',
             endTime:'',
           }
      }
    },
    mounted(){},
    methods:{
      handleCardSearch(){
        if(this.cardNumber==''){
          Toast({
            message: '请输入卡券号',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        var params = new URLSearchParams();
        params.append('code', this.cardNumber);
        this.$axios({
          method: 'post',
          url:'gp/cardCancel/getCard',
          data:params
        }).then((res)=>{
          console.log(res)
          if(res.data.statusCode==200){
          this.showCard=true;
          this.cardInfo.name=res.data.object.cardName;
          this.cardInfo.code=res.data.object.code;
          this.cardInfo.beginTime=res.data.object.begin_time;
          this.cardInfo.endTime=res.data.object.end_time;

        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:1000
          });
          return false;
        }
          });
      },
      handleCancle(){
        var params = new URLSearchParams();
        params.append('code', this.cardInfo.code);
        this.$axios({
          method: 'post',
          url:'gp/cardCancel/consumeCard',
          data:params
        }).then((res)=>{
          console.log(res)
        if(res.data.statusCode==200){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:1500
          });
          setTimeout(()=>{
            this.$router.push({path:'/cancel-coupon'})
        },1500)
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:1000
          });
          return false;
        }
      });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-number-cancle .module-search {
    padding:16px;
    font-size: 0; }
  .app-number-cancle .search-input {
    display: inline-block;
    vertical-align: middle;
    width: 76%;
    padding:12px 10px;
    font-size:15px;
    outline: none;
    border: 1px solid #eee;
    border-radius: 4px 0 0 4px;
    border-right: none; }
  .app-number-cancle .search-input::-webkit-input-placeholder {
    color: #ccc; }
  .app-number-cancle .search-button {
    background: #007EE5;
    display: inline-block;
    vertical-align: middle;
    padding:12px 0;
    width: 24%;
    font-size:14px;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 0 4px 4px 0;
    font-family: "Microsoft YaHei";
  }
  .app-number-cancle .result-none {
    padding:8px;
    text-align: center;
    font-size:14px;
    color: #999; }
  .app-number-cancle .module-step {
    margin: 0;
    padding:0 20px; }
  .app-number-cancle .module-step .item {
    margin:0 0 16px; }
  .app-number-cancle .module-step .item-title {
    display: block;
    margin: 0 0 4px;
    font-size:15px;
    color: #333; }
  .app-number-cancle .module-step .item-tips {
    display: block;
    font-size:13px;
    color: #888;
    line-height:20px; }
  .app-number-cancle .search-result {
    padding:8px 16px; }
  .app-number-cancle .module-card{
    background: #fff;
    padding:11px 16px 12px;
    margin: 0 0 16px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px; }
  .app-number-cancle .module-card .item-header {
    padding: 0 0 10px;
    font-size:15px;
    color: #333;
    font-weight: bold;
    border-bottom: 1px solid #eee; }
  .app-number-cancle .module-card .item-body {
    margin: 0;
    padding:10px 0 0;
    font-size:14px;
    color: #888; }
  .app-number-cancle .module-card .item-body dd {
    margin: 0;
    line-height:22px; }
  .app-number-cancle .button-content {
    padding:10px 0; }
  .app-number-cancle .button-content .btn {
    background: #007EE5;
    display: block;
    width: 100%;
    outline: none;
    padding:10px 0;
    border: none;
    color:#fff;
    font-size:16px;
    border-radius:4px;
    font-family: "Microsoft YaHei";
  }

</style>
